<template>
	<view class="box-title f-column-Hcenter">
		<view class="title f-row-Hcenter f-row-between" :style="{height:height +'rpx'}">
			<view class="f-row-Hcenter">
				<view class="color-box" style="background: #128A80;"></view>
				<span>{{tietleData}}</span>
			</view>
			<view class="dates-box f-row-between f-row-Hcenter">
				<slot></slot>
			</view>
		</view>
		<view v-if="showLine" style="width:100%;" class="f-row-Wcenter"><view style="width: 100%; border-bottom: 1px rgba(212, 211, 211, 0.7) solid;"></view></view>
	</view>
</template>

<script>
	export default {
		props:{
			tietleData: {
				type: String,
				default: "标题" 
			},
			height: {
				type: [String, Number],
				default: 70
			},
			showLine: {
				type: Boolean,
				default: true
			}
			
		}
	}
</script>

<style lang="scss">
	.box-title {
		// margin-top: 10upx;
		//页面的父级元素不能 f-column-Wcenter 会撑不开
		width: 100%;
		.title {
			height: 70upx;
			.color-box{
				border-radius: 4upx;
				height: 35upx;
				width: 10upx;
			}
			span {
				margin-left: 20upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #717171;
			}
		}
		
	}
</style>